<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { arrayGroupBy } from '../../../lib/utils'
import { color } from 'echarts/lib/export'
export default {
  name: 'BarBaseChart',
  components: {},
  extends: BaseChartVue,
  props: {
    color: {
      type: Array,
      default: () => ['#0b82ff', '#34e3c4', '#FFC371', '#797AFF', '#fb4747', '#0ddbff', '#ffe30d'],
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      },
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {},

  created() { },
  mounted() { },
  methods: {
    makeOptions() {
      let dataList = this.dataList
      let option = {
        title: {
          text: this.title,
          textStyle: {
            fontSize: 18,
            color: '#000',
            lineHeight: 20
          },
          textAlign: 'center',
          left: '32%%',
          top: '43%'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = `${params.name}:${params.percent}%`;
            return str;
          },
        },
        legend: {
          show: true,
          top: 'center',
          orient: 'vertical',
          right: 0,
          icon: 'circle',
          textStyle: {
            color: '#000',
            rich: {
              uname: {
                width: 75,
                // width: 60,
                fontSize:14
              },
              unum: {
                color: '#444',
                width: 40,
                align: 'right',
                fontSize:14
              }
            }
          },
          itemWidth: 10,
          itemHeight: 10,
          formatter(name) {
            var target;
            for (var i = 0, l = dataList.length; i < l; i++) {
              if (dataList[i].name == name) {
                target = dataList[i].value;
              }
            }
            return `{uname|${name}}{unum|${target}%}`
          }
        },
        color: this.color,
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['70%', '85%'],
            center: ['33%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false
            },
            data: this.dataList
          }
        ]
      };
      return option
    },
  },
}
</script>